<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header" style="line-height: 50px; padding-left: 20px">
        电影预告片网站
      </div>
    </div>
</nav>
<div class="container-fluid">
  <div class="row">
    <!-- 左侧导航部分 -->
    <div class="col-sm-2">
      <ul class="nav">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
      </ul>
    </div>
    <!-- 右侧预告片内容区 -->
    <div class="col-sm-10 tab-content">
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-body">
            <img 
              style="width: 100%" 
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570272570988&di=52ec8c4557cdafb2855180e567214b22&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F07%2F20171207025922_iKkmy.jpeg" 
              data-video-url="https://oss.static.nubia.cn/active/5d4a8222396521.mp4"
              />
            <div>
              <h4>电影名：功夫</h4>
              <p style="height: 40px; overflow: hidden;">《功夫》是由周星驰执导，周星驰、曾谨昌、霍昕、陈文强编剧，周星驰、梁小龙、元华等主演的动作喜剧类电影，于2004年12月23日在中国上映。影片讲述了一个街头混混变成一代武术家，一个本性善良的黑帮流氓改邪归正的故事。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-body">
            <img 
              style="width: 100%" 
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570272570988&di=52ec8c4557cdafb2855180e567214b22&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F07%2F20171207025922_iKkmy.jpeg" 
              data-video-url="https://oss.static.nubia.cn/active/5d4a8222396521.mp4"
              />
            <div>
              <h4>电影名：功夫</h4>
              <p style="height: 40px; overflow: hidden;">周星驰、梁小龙、元华等主演的动作喜剧类电影，于2004年12月23日在中国上映。影片讲述了一个街头混混变成一代武术家，一个本性善良的黑帮流氓改邪归正的故事。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-body" >
            <img 
              style="width: 100%" 
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570272570988&di=52ec8c4557cdafb2855180e567214b22&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F07%2F20171207025922_iKkmy.jpeg" 
              data-video-url="https://oss.static.nubia.cn/active/5d4a8222396521.mp4"
              />
            <div>
              <h4>电影名：功夫</h4>
              <p style="height: 40px; overflow: hidden;">《功夫》是由周星驰执导，周星驰、曾谨昌、霍昕、陈文强编剧，周星驰、梁小龙、元华等主演的动作喜剧类电影，于2004年12月23日在中国上映。影片讲述了一个街头混混变成一代武术家，一个本性善良的黑帮流氓改邪归正的故事。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="panel panel-default">
          <div class="panel-body">
            <img 
              style="width: 100%" 
              src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570272570988&di=52ec8c4557cdafb2855180e567214b22&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F07%2F20171207025922_iKkmy.jpeg" 
              data-video-url="https://oss.static.nubia.cn/active/5d4a8222396521.mp4"
              />
            <div>
              <h4>电影名：功夫</h4>
              <p style="height: 40px; overflow: hidden;">《功夫》是由周星驰执导，周星驰、曾谨昌、霍昕、陈文强编剧，周星驰、梁小龙、元华等主演的动作喜剧类电影，于2004年12月23日在中国上映。影片讲述了一个街头混混变成一代武术家，一个本性善良的黑帮流氓改邪归正的故事。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 模态框 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">电影预告</h4>
      </div>
      <div class="modal-body">
        <div id="dplayer"></div>
      </div>
      <div class="modal-footer">
        <button 
          type="button" 
          class="btn btn-default" 
          data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
